<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>13jQuery AJAX</title>
    <script src="../03jquery/js/jquery-3.6.0.js"></script>
    <script>
        $(function () {
            $("button:contains('get')").click(function () {
                const httpOut = $.get("http://localhost:8080/lishuoboy_javaweb_war_exploded/TestAjaxServlet", {'name': '张三'}, function (data, status, http) {
                    $("div:eq(0)").text(data);                  // <html><body> <h1>hello get</h1> </body></html>
                    $("div:eq(1)").text(status);                // success
                    $("div:eq(2)").text(JSON.stringify(http));  // {"readyState":4,"responseText":"<html><body>\r\n<h1>hello get</h1>\r\n</body></html>\r\n","status":200,"statusText":"success"}
                });
                $("div:eq(3)").text(JSON.stringify(httpOut));   // {"readyState":1}
            });

            $("button:contains('post')").click(function () {
                const httpOut = $.post("http://localhost:8080/lishuoboy_javaweb_war_exploded/TestAjaxServlet", {'name': '张三'}, function (data, status, http) {
                    $("div:eq(0)").text(data);                  // <html><body> <h1>hello post</h1> </body></html>
                    $("div:eq(1)").text(status);                // success
                    $("div:eq(2)").text(JSON.stringify(http));  // {"readyState":4,"responseText":"<html><body>\r\n<h1>Hello World!</h1>\r\n</body></html>\r\n","status":200,"statusText":"success"}
                });
                $("div:eq(3)").text(JSON.stringify(httpOut));   // {"readyState":4,"responseText":"<html><body>\r\n<h1>hello post</h1>\r\n</body></html>\r\n","status":200,"statusText":"success"}
            });

        });
    </script>
</head>
<body>
<button>get</button>
<button>post</button>

<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>

</body>
</html>